<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>APP下载明细</title>
  <link rel="stylesheet" href="../../mobile_static/css/element.css">
  <link rel="stylesheet" href="../../mobile_static/css/base.css">
  <link rel="stylesheet" href="../../mobile_static/css/operationIndexAnalysis/AppDownloadDetails.css">
  <script src="../../mobile_static/js/vue.js"></script>
  <script src="../../mobile_static/js/axios.js"></script>

</head>

<body>
  <div id="app">
    <div class="app-content">
      <!-- 导航栏 -->
      <div class="top-bar">
        <div>
          <el-button @click="backHome" type="primary" plain>返回</el-button>
        </div>
      </div>
      <!-- 表格 -->
      <div class="table-box">
        <!-- 表格标题 -->
        <div class="table-title">
          <h2>APP名称：{{AppName}}</h2>
          <div class="download-box">
            <el-button type="primary" @click="download">下载</el-button>
          </div>
          <div class="search-box">
            <el-input prefix-icon="el-icon-search" v-model="searchValue" placeholder="按用户名搜索" @change="search"></el-input>
          </div>
          <div class="select-box">
            <!-- <el-select v-model="value" placeholder="请选择" @change="RequestAppDetailed">
              <el-option v-for="item in options" :key="item.g0departmentcode" :label="item.g0departmentname" :value="item.g0departmentcode">
              </el-option>
            </el-select> -->
          </div>
        </div>
        <!-- 表格主体 -->
        <div class="table-main">
          <el-table :data="tableData" stripe style="width: 100%" v-loading="loading" border :header-cell-style="{background: 'linear-gradient(180deg, #FAFAFA 0%, #F1F1F1 100%)',fontSize:'16px',fontWeight:'bold',color:'#000000'}">
            <el-table-column prop="g0userid" label="登录账号"  width="160">
            </el-table-column>
            <el-table-column prop="g0username" label="用户姓名"  width="120">
            </el-table-column>
            <el-table-column prop="g0departmentname" label="所属企业" min-width="350">
            </el-table-column>
            <el-table-column prop="g0downloadtime" label="下载时间" width="260">
            </el-table-column>
          </el-table>
        </div>
        <!-- 分页 -->
        <div class="paging-box">
          <div class="block">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
              :page-sizes="[10, 20, 30, 40]" :page-size="size" layout="total, sizes, prev, pager, next, jumper"
              :total="length">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>
<script src="../../mobile_static/js/element.js"></script>
<script type="module">
  import { postAppId, getAppDownload } from '../../mobile_static/axios/axios.config.js'
  new Vue({
    el: "#app",
    data() {
      return {
        timeValue: "", //日期value值
        options: [
     
        ],
        value: '', //选择器value值
        searchValue: "",
        tableData: [
          {
            loginAccount: "xiaofei.liu",
            useName: "刘晓飞",
            affiliatedCompanies: "总部/石化盈科/新公文测试",
            downloadTime: "2022-01-05 15:00:00"
          },
          {
            loginAccount: "feng.zhou",
            useName: "周峰",
            affiliatedCompanies: "总部/石化盈科/实习外协",
            downloadTime: "2022-01-05 15:00:00"
          },
          {
            loginAccount: "guoqiang.xie",
            useName: "谢国强",
            affiliatedCompanies: "总部/总部机关/炼油事业部/办公室",
            downloadTime: "2022-01-05 15:00:00"
          },
          {
            loginAccount: "xiaofei.liu",
            useName: "刘晓飞",
            affiliatedCompanies: "总部/石化盈科/新公文测试",
            downloadTime: "2022-01-05 15:00:00"
          },
          {
            loginAccount: "xiaofei.liu",
            useName: "刘晓飞",
            affiliatedCompanies: "总部/石化盈科/新公文测试",
            downloadTime: "2022-01-05 15:00:00"
          },
          {
            loginAccount: "xiaofei.liu",
            useName: "刘晓飞",
            affiliatedCompanies: "总部/石化盈科/新公文测试",
            downloadTime: "2022-01-05 15:00:00"
          },
          {
            loginAccount: "xiaofei.liu",
            useName: "刘晓飞",
            affiliatedCompanies: "总部/石化盈科/新公文测试",
            downloadTime: "2022-01-05 15:00:00"
          },
        ],
        size: 10,
        page: 1,
        length: '',
        softwarecode: "",
        AppName: "",
        startDate: "",
        endDate: "",
        loading: false,

      }
    },
    created() {
      this.options = JSON.parse(sessionStorage.getItem('codeAll'))

      // if(window.location.search!=""){
      this.softwarecode = window.location.search.slice(1).split("&")[0].split("=")[1]
      this.AppName = decodeURI(window.location.search.slice(1).split("&")[1].split("=")[1])
      this.value = window.location.search.slice(1).split("&")[2].split("=")[1]
      this.startDate = window.location.search.slice(1).split("&")[3].split("=")[1]
      this.endDate = window.location.search.slice(1).split("&")[4].split("=")[1]
      // }else {
      //   this.startDate = window.location.search.slice(1).split("=")[1]
      //   let tomo = new Date(new Date(window.location.search.slice(1)).valueOf() + 86400000)
      //   this.endDate = `${tomo.getFullYear()}-${this.ZeroComplement(tomo.getMonth() + 1)}-${this.ZeroComplement(tomo.getDate())}`
      // }
    },
    mounted() {
      this.RequestAppDetailed()
    },
    methods: {
      search() {
        this.page = 1
        this.RequestAppDetailed()
      },
      backHome() {
        
        window.history.back()
      },
      handleSizeChange(val) {
        this.size = val
        this.RequestAppDetailed()
      },
      handleCurrentChange(val) {
        this.page = val;
        this.RequestAppDetailed()
      },
      //请求APP下载明细
      RequestAppDetailed() {        
        this.loading = true
        postAppId('djxzcstzmx00', {
          pageSize: this.size,
          pageNum: this.page,
          startDate: this.startDate,
          endDate: this.endDate,
          g0enterpriseCode: this.value,
          orderType: 'desc',
          g0username: this.searchValue,
          g0softwareCode: this.softwarecode
        }).then(res => {
          this.loading = false
          res = JSON.parse(res.data.msg);
          // console.log(res,"请求APP下载明细");
          if(res.total){
            this.tableData = res.data
          }else{
            this.tableData = []
          }
          this.length = res.total
        })
      },
      //下载
      download() {
        if (this.length > 50000) {
          this.$notify.error({
            title: '下载失败',
            message: "下载数据条数不能超过50000条",
          });
          return
        }
        this.loading = true
        getAppDownload("djxzcstzmx00Export", {
          pageSize: this.length,
          pageNum: 1,
          startDate: this.startDate,
          endDate: this.endDate,
          g0enterpriseCode: this.value,
          orderType: 'desc',
          g0username: this.searchValue,
          g0softwareCode: this.softwarecode
        }).then(res => {
          if (!res) {
            return
          }
          this.loading = false

          let url = window.URL.createObjectURL(res.data)
          let link = document.createElement("a")
          link.style.display = 'none'
          link.href = url
          link.setAttribute('download', 'APP下载明细.xlsx')
          document.body.appendChild(link)
          link.click()
        })
      }
    }
  })
</script>